$(function () {
    var form = layui.form
    // 获取类别数据
    initArtCate()
    function initArtCate() {
        $.ajax({
            url: '/my/article/cates',
            method: 'GET',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                console.log(res)
                var htmlTpl = template('tplArtCate', res)
                $('tbody').html(htmlTpl)
            }
        })
    }
    var layerIndex = null
    // 添加类别
    $('#addBtn').on('click', function () {
        console.log('点击了添加类别按钮');
        // 搞一个弹框
        // 当打开一个弹出层的时候，会返回一个当前弹出层的索引值
        // 可以利用这个弹出层的索引值来关闭对应的弹框
        layerIndex = layer.open({
            type: 1,
            title: '添加文章分类',
            area: ['500px', '250px'],
            content: $('#tplAddCate').html()
        });
    })
    // 编辑类别
    $('tbody').on('click', '#editBtn', function () {
        console.log('点击了编辑按钮');
        layerIndex = layer.open({
            type: 1,
            title: '修改文章分类',
            area: ['500px', '250px'],
            content: $('#tplEditCate').html()
        });
        // 获取自定义文章类别Id
        var cate_id = $(this).attr('data-id')
        console.log(cate_id);
        // 根据文章类别Id请求当前类别数据并快速赋值给form表单
        $.ajax({
            url: '/my/article/cates/' + cate_id,
            method: 'GET',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                // 快速给form表单赋值
                form.val('editCateForm', res.data)
            }
        })
    })

    // 提交类别编辑,更新分类
    $('body').on('submit', '#editCateForm', function (e) {
        e.preventDefault()
        $.ajax({
            url: '/my/article/updatecate',
            method: 'POST',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg('更新成功')
                initArtCate()
                layer.close(layerIndex)
            }
        })
    })
    // 请求添加类别接口
    // 注意使用事件委托绑定submit事件，
    // 因为添加类别的弹框页面初始化的时候没有，是点击按钮时候才生成的生成的
    $('body').on('submit', '#addCateForm', function (e) {
        console.log(e)
        e.preventDefault()
        $.ajax({
            url: '/my/article/addcates',
            method: 'POST',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg('添加成功！')
                initArtCate()
                // 添加成功手动关闭当前弹框
                layer.close(layerIndex)
            }
        })
    })

    // 利用事件委托的方式给删除按钮绑定点击事件
    $('tbody').on('click', '#btnDel', function () {
        console.log('删除按钮点击了', $(this).attr('data-id'));
        var id = $(this).attr('data-id')
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
            //do something
            $.ajax({
                url: '/my/article/deletecate/' + id, // 注意动态路由接口参数配置
                method: 'GET',
                success: function (res) {
                    if (res.status !== 0) {
                        return layer.msg(res.message)
                    }
                    layer.msg('删除成功')
                    // 删除成功后重新拉取数据
                    initArtCate()
                }
            })
            layer.close(index);
        })
    })
})